<template>
  <div class="start mbm bt_line">
    <h4 class="step_title mbm">第一步，设置我的接听开场白：</h4>
    <a-form layout="inline" :form="formStart" @submit="handleSubmit">
      <a-form-item>
        <a-auto-complete
          class="talk_input mrm"
          :dataSource="dataSource"
          style="width: 300px"
          @select="onSelect"
          @search="handleSearch"
          placeholder="请输入接听电话时，您要说的话。"
          v-decorator="[
          'prologue',
          { rules: [{ required: true, message: '没有开场白，对方会误认无人接听哦？' }] },
          ]"
        />
      </a-form-item>
      <a-form-item>
        <a-button type="primary" html-type="submit">设置生效</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dataSource: typeof this.$store.state.common.setting.talk_prologue_history!=="undefined"?this.$store.state.common.setting.talk_prologue_history.split("|"):["您好，找谁？","您好，请说话。","有什么事？"],
    };
  }, 
  computed: {
    prologue() {      
      return this.$store.state.common.setting.talk_prologue;
    },
  },
  created(){
      this.formStart  = this.$form.createForm(this, {
        name: "form_start",
        mapPropsToFields: () => {
          return {
            prologue: this.$form.createFormField({
              value: this.prologue
            })
          };
        }
      })
  },
  methods: {
    handleSearch() {
    },
    onSelect() {
    },
    handleSubmit(e) {
      e.preventDefault();
      this.formStart.validateFields((err, values) => {
        if (!err) {
          this.$api.setting
            .set({
              key: "talk_prologue",
              value: values.prologue
            })
            .then(() => {
              this.$message.info("接听语音已经生效！");
            })
            .catch(err => {
              console.log(err);
            });
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
</style>